<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link href="css/common.css" rel="stylesheet"/>
    <link rel="stylesheet" href="fonts/iconfont.css" />
    <link rel="stylesheet" href="css/mui.min.css" />
    <link rel="stylesheet" href="css/mui.picker.min.css" />
    <style type="text/css" id="sty">
    	.content{
    		border-top: 5px solid #eeeeee;
    		background: transparent;
    	}
    	

		.sign-btn{
			width: 100%;
			height: 150px;
			text-align: center;
			background: #fff;
		}
		.sign-btn div{
			height:40px;
			width: 100px;
			background: #3CA3FF;
			color: #fff;
			font-size: 1.6rem;
			line-height: 40px;
			margin: 0 auto;
			border-radius:12px ;
			margin-bottom: 20px;
		}
		.add-work{
			height: 40px;
			line-height: 40px;
			background: #fff;
			margin-top: 10px;
			padding: 0 15px;
		}
		.add-work p{
			text-align: right;
			color: #3CA3FF;
			font-size: 1.6rem;
			font-weight: bold;
		}
		.icon-add{
			font-size: 1.8rem;
			margin-left: 8px;
		}
		.sub-btn{
			text-align: center;
			width: 100%;
			height: 50px;
			color: #fff;
			background: #3CA3FF;
			line-height: 50px;
			font-size: 2rem;
			margin-top: 20px;
		}
		.apply{
			background: #fff;
			padding: 10px 15px;
		}
		.acon{
			float: left;
			font-size: 1.4rem;
			color: #333;
		}
		.app-num{
			width: 16px;
			height: 16px;
			border-radius: 8px;
			background: #999;
			color: #fff;
			text-align: center;
			font-size: 1.2rem;
			line-height: 16px;
			margin-right: 10px;
		}
		.app-name{
			width: 90%;
			/*margin-right: 10px;*/
		}
		.one{
			width: 40%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		    -webkit-box-orient: vertical;
		}
		.app-time{
			width: 40%;
		}
		.app-close{
			float: right;
		}
		.gaps{
			border: none;
			height: 3px;
			margin-bottom: 10px;
			border-bottom: 1.5px dashed #eee;
		}
		.app-content,.app-con{
			margin-left: 26px;
			display: none;
		}
		.app-content div{
			display: inline-block;
			font-size: 1.4rem;
			color: #666;
			width: 49%;
		}
		.ri{
			text-align: right;
		}
		.introduction{
			padding: 0 15px;
		}
		.introduction p{
			font-size: 1.2rem;
		}
	
		
		
	.detail-time>div{
      	font-size: 1.4rem;
      	color: #999;
      }
      .timeinfo{
      	float: left;
	    width: 17%;
	    margin-right: 4%;
	    text-align: right;
	    height: 42px;
      }
      .detail-time p{
      	margin-bottom: 0;}
      .proicon{
      	float: left;
	    /*padding-top: 13px;*/
      }
      .proicon img{
      	width: 20px;
    	margin-left: -5px;
      }
      .contentinfo{
      	float: left;
		margin-left: 4%;
      }
      .icon-xiangxia{
      	color: #dbdbdb;
      	font-size: 1rem;
      }
   	  .apply:nth-child(even){
   	  	background: #DBDBDB;
   	  }
	  .ge3 {
	    display: inline-block;
	    width: 1.5rem;
	    height: 1.5rem;
	    background: url(img/writer.png) no-repeat;
	    background-size: 100% 100%;
	}
	.input-group:after{
		content: none;
	}

   input{
   	background: transparent!important;
   }
    </style>
</head>
<body>
	<header class="nav">
		<i class="iconfont icon-fanhui" style="float: left;"></i>
	    <span>事项详情</span>
	</header>

	<div class="content basic" >
		<div class="apply">
			<div class="app-des">
				<div class=" acon app-num">1</div>
				<div class=" acon app-name one">
					预申请单位按报件须知准备材料向市土发中心报件
				</div>
				<div class="acon app-time">
					是否到期完成：<span>是</span>
				</div>
				<div class="acon app-close">
					<i class="iconfont icon-up toggle"></i>
				</div>
				<div class="clear">
				</div>
			</div>
			<div class="app-content" style="display: none;">
				<hr class="gaps"/>
				<div>是否按期完成：<span>是</span></div>
				<div class="ri">责任部分：<span>土地发展中心</span></div>
				<div>责任领导：<span>林文建</span></div>
				<div class="ri">责任人：<span>林有发</span></div>
			</div>
			<div class="app-con" style="display: none;">
				<div class="clear"></div>
				<div class="input-group">
					<label style="width: 29%;padding-left: 0;">办理情况：</label>
					<input style="width: 70%;" type="" name="" id="" value="概述概述概述概述概述概述概述概述概"/>
				</div>
				<hr class="gaps"/>
				<div class="input-group">
					<label>开始期限：</label>
					<input type="text" class="date-select" data-options='{}'value="2017-10-10 10:10" >
				</div>
				<div class="input-group">
					<label>完成期限：</label>
					<input type="text" class="date-select" data-options='{}'value="2017-10-10 10:10" >
				</div>
			</div>
		</div>
		<div class="apply">
			<div class="app-des">
				<div class=" acon app-num">2</div>
				<div class=" acon app-name one">
					预申请单位按报件须知准备材料向市土发中心报件
				</div>
				<div class="acon app-time">
					是否到期完成：<span>是</span>
				</div>
				<div class="acon app-close">
					<i class="iconfont icon-up toggle"></i>
				</div>
				<div class="clear">
				</div>
			</div>
			<div class="app-content" style="display: none;">
				<hr class="gaps"/>
				<div>是否按期完成：<span>是</span></div>
				<div class="ri">责任部分：<span>土地发展中心</span></div>
				<div>责任领导：<span>林文建</span></div>
				<div class="ri">责任人：<span>林有发</span></div>
			</div>
			<div class="app-con" style="display: none;">
				<div class="clear"></div>
				<div class="input-group">
					<label style="width: 29%;padding-left: 0;">办理情况：</label>
					<input style="width: 70%;" type="" name="" id="" value="概述概述概述概述概述概述概述概述概"/>
				</div>
				<hr class="gaps"/>
				<div class="input-group">
					<label>开始期限：</label>
					<input type="text" class="date-select" data-options='{}'value="2017-10-10 10:10" >
				</div>
				<div class="input-group">
					<label>完成期限：</label>
					<input type="text" class="date-select" data-options='{}'value="2017-10-10 10:10" >
				</div>
			</div>
		</div>
		<div class="apply">
			<div class="app-des">
				<div class=" acon app-num">3</div>
				<div class=" acon app-name one">
					预申请单位按报件须知准备材料向市土发中心报件
				</div>
				<div class="acon app-time">
					是否到期完成：<span>是</span>
				</div>
				<div class="acon app-close">
					<i class="iconfont icon-up toggle"></i>
				</div>
				<div class="clear">
				</div>
			</div>
			<div class="app-content" style="display: none;">
				<hr class="gaps"/>
				<div>是否按期完成：<span>是</span></div>
				<div class="ri">责任部分：<span>土地发展中心</span></div>
				<div>责任领导：<span>林文建</span></div>
				<div class="ri">责任人：<span>林有发</span></div>
			</div>
			<div class="app-con" style="display: none;">
				<div class="clear"></div>
				<div class="input-group">
					<label style="width: 29%;padding-left: 0;">办理情况：</label>
					<input style="width: 70%;" type="" name="" id="" value="概述概述概述概述概述概述概述概述概"/>
				</div>
				<hr class="gaps"/>
				<div class="input-group">
					<label>开始期限：</label>
					<input type="text" class="date-select" data-options='{}'value="2017-10-10 10:10" >
				</div>
				<div class="input-group">
					<label>完成期限：</label>
					<input type="text" class="date-select" data-options='{}'value="2017-10-10 10:10" >
				</div>
			</div>
		</div>
		<div class="apply">
			<div class="app-des">
				<div class=" acon app-num">4</div>
				<div class=" acon app-name one">
					预申请单位按报件须知准备材料向市土发中心报件
				</div>
				<div class="acon app-time">
					是否到期完成：<span>是</span>
				</div>
				<div class="acon app-close">
					<i class="iconfont icon-up toggle"></i>
				</div>
				<div class="clear">
				</div>
			</div>
			<div class="app-content" style="display: none;">
				<hr class="gaps"/>
				<div>是否按期完成：<span>是</span></div>
				<div class="ri">责任部分：<span>土地发展中心</span></div>
				<div>责任领导：<span>林文建</span></div>
				<div class="ri">责任人：<span>林有发</span></div>
			</div>
			<div class="app-con" style="display: none;">
				<div class="clear"></div>
				<div class="input-group">
					<label style="width: 29%;padding-left: 0;">办理情况：</label>
					<input style="width: 70%;" type="" name="" id="" value="概述概述概述概述概述概述概述概述概"/>
				</div>
				<hr class="gaps"/>
				<div class="input-group">
					<label>开始期限：</label>
					<input type="text" class="date-select" data-options='{}'value="2017-10-10 10:10" >
				</div>
				<div class="input-group">
					<label>完成期限：</label>
					<input type="text" class="date-select" data-options='{}'value="2017-10-10 10:10" >
				</div>
			</div>
		</div>
		<div class="introduction">
			<p>办理要求:</p>
		    <p>1、对各子项目（环节）的办理情况，“两单一表”发起人应按照“格式规范、内容简洁、文字精炼”的原则，逐项进行再梳理、再完善、再核实。</p> 
		    <p>2、对同一环节涉及多个责任单位的，“两单一表”发起人应将其办理情况统一汇总，整理归纳，对照任务要求重新填写。</p>
		</div>
		<div class="sub-btn">
			申请办结
		</div>
	</div>
	
	<script type="text/javascript" src="js/mui.min.js" ></script>
    <script type="text/javascript" src="js/mui.picker.min.js" ></script>
    <script src="js/common.js"></script>
    <!--模板-->
    
    <script>
    	window.onload=function(){
    		//点击切换打开关闭详情状态
    		var list=document.getElementsByClassName('toggle');
    		var list1=document.getElementsByClassName('app-content');
    		var list2=document.getElementsByClassName('app-con');
    		var list3=document.getElementsByClassName('app-time');
    		for (let i=0;i<list.length;i++) {
    			console.log(i);
    			list[i].addEventListener('click',function(){
    			console.log(i);
    				if(this.classList.contains('icon-up')){
    					this.classList.remove('icon-up');
    					this.classList.add('icon-down');
    					console.log(document.getElementsByClassName('app-name')[i]);
    					document.getElementsByClassName('app-name')[i].classList.remove('one');
    					list1[i].style.display='block';
    					list2[i].style.display='block';
    					list3[i].style.display='none';
    				}else{
    					this.classList.add('icon-up');
    					this.classList.remove('icon-down');
    					document.getElementsByClassName('app-name')[i].classList.add('one');
    					list1[i].style.display='none';
    					list2[i].style.display='none';
    					list3[i].style.display='block';
    				}
    			})
    		}
    		
    	}
    </script>
</body>
</html>
